<template>
  <div>
    <div class="map" id="container"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arriveCoor: [],
      map: null,
      houseId: ""
    }
  },

  mounted(){
    this.houseId = this.$route.params.id
    this.houseData()
   
  },
  
  methods: {

    houseData() {
      this.axios({
        url: " http://estate.ccp520.com/api/v1/share/house/" + this.houseId,
        methods: "get"
      }).then((res) => {
         this.arriveCoor[0] = res.data.data.villageInfoResponse.longitude
         this.arriveCoor[1] = res.data.data.villageInfoResponse.latitude
         this.createMap()
      })
    },

    createMap () {
      this.map = new window.AMap.Map('container', {
        resizeEnable: true, 
        zoom: 16,
        center: this.arriveCoor 
      });
      this.addMarker(this.arriveCoor)
    },

    addMarker(arriveCoor) {
       var _this = this;
       let marker = null
       marker = new AMap.Marker({
           icon: "http://img.curiousmore.com/64157257422",  //图片ip
           imageSize: "2px",
           position: arriveCoor,
           offset: new AMap.Pixel(-13, -30),
           // 设置是否可以拖拽
           draggable: true,
           cursor: 'move',
           // 设置拖拽效果
           raiseOnDrag: true
       });
       marker.setMap(this.map);
    },
  },
}
</script>
<style>

#container {
  width: 100%;
  height: 10rem;
}
</style>
